<template>
    <div class="card card-custom gutter-b example example-compact" id="orgBody">
        <div class="card-header">
            <div class="card-title">
            <span class="card-icon">              
                <span class="svg-icon svg-icon-primary svg-icon-2x">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <polygon points="0 0 24 0 24 24 0 24"/>
                        <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,
                        8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,
                        4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                        <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,
                        15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,
                        21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                    </g>
                </svg>
                </span>
            </span>
            <h3 class="card-label"> 操作区域 </h3>
            </div>
            <div class="card-toolbar">
            <div class="example-tools justify-content-center">
                <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
            -->
            </div>
            </div>
        </div>
        <div class="card-body">
            <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                <div class="m-portlet__body">	
                
                </div> 
                <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                <div class="m-form__actions m-form__actions--solid">
                    <div class="row">
                    <div class="col m--align-left">
                        <button class="btn btn-light-primary font-weight-bold font-size-sm py-3 px-8 mr-2 "
                        v-permission="{ action: '/sysDepartInfo/add', effect: 'display' }"
                        @click="addRootSysDepart">
                            <span><i class="la la-plus la-lg"></i><span>新增部门</span></span>
                        </button>
                        <!-- 
                        <button class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3" @click="addSysDepart()">
                            <span class="svg-icon svg-icon-primary svg-icon-2">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect x="0" y="0" width="24" height="24"/>
                                    <circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10"/>
                                    <path d="M11,11 L11,7 C11,6.44771525 11.4477153,6 12,6 C12.5522847,6 13,6.44771525 13,7 L13,11 L17,11 C17.5522847,11 18,11.4477153 18,12 C18,12.5522847 17.5522847,13 17,13 L13,
                                        13 L13,17 C13,17.5522847 12.5522847,18 12,18 C11.4477153,18 11,17.5522847 11,17 L11,13 L7,13 C6.44771525,13 6,
                                        12.5522847 6,12 C6,11.4477153 6.44771525,11 7,11 L11,11 Z" fill="#000000"/>
                                </g>
                            </svg><span>新增部门</span></span>
                        </button> 
                        -->
                    </div>
                    <div class="col m--align-right">
                        
                    </div>
                    </div>
                </div>
                </div>             
            </div>
        </div>
        <el-table
            sum-text="sum"
            index-text="#"
            :data="orgList"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            :default-expand-all="props.defaultExpandAll"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column
                prop="name"
                label="名称"
                show-overflow-tooltip >
            </el-table-column>
            <el-table-column
                label="类型"
                show-overflow-tooltip >
                <template slot-scope="scope">
                    <div v-if="scope.row.tempObject == 'DEPART'" class="symbol symbol-40 symbol-circle symbol-light-success">
                        <span class="symbol-label font-size-h8">部门</span>
                    </div>
                    <div v-if="scope.row.tempObject == 'POST'" class="symbol symbol-40 symbol-circle symbol-light-warning">
                        <span class="symbol-label font-size-h8">岗位</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                show-overflow-tooltip 
                min-width="160">
                <template slot-scope="scope">
                    <button @click="addSysDepart(scope.row.id)" class="btn btn-link" title="新建下级部门" v-permission="{ action: '/sysDepartInfo/add', effect: 'display' }" v-if="scope.row.tempObject == 'DEPART'">新建下级部门</button>
                    <button @click="addSysPost(scope.row.id,1)" class="btn btn-link" title="新建一级岗位" v-permission="{ action: '/sysPost/add', effect: 'display' }" v-if="scope.row.tempObject == 'DEPART'">新建一级岗位</button>
                    <button @click="addSysPost(scope.row.id,2)" class="btn btn-link" title="新建下级岗位" v-permission="{ action: '/sysPost/add', effect: 'display' }" v-if="scope.row.tempObject == 'POST'">新建下级岗位</button>
                    <button @click="updateSysDepart(scope.row.id)" class="btn btn-link" title="编辑部门" v-permission="{ action: '/sysDepartInfo/update', effect: 'display' }" v-if="scope.row.tempObject == 'DEPART'">编辑部门</button>
                    <button @click="updateSysPost(scope.row.id)" class="btn btn-link" title="编辑岗位" v-permission="{ action: '/sysPost/update', effect: 'display' }" v-if="scope.row.tempObject == 'POST'">编辑岗位</button>
                    <button @click="delSysDepartInfo(scope.row.id)" class="btn btn-link" title="删除部门" v-permission="{ action: '/sysDepartInfo/delete', effect: 'display' }" v-if="scope.row.tempObject == 'DEPART'">删除部门</button>
                    <button @click="delSysPost(scope.row.id)" class="btn btn-link" title="删除岗位" v-permission="{ action: '/sysPost/delete', effect: 'display' }" v-if="scope.row.tempObject == 'POST'">删除岗位</button>
                    <!-- 
                        <a class="btn btn-light-success btn-sm mr-2" v-if="scope.row.tempObject == 'DEPART'">创建子部门</a>
                        <a href="#" class="btn btn-light-success btn-sm mr-2"><i class="el-icon-edit"  @click="updateDepart(scope.row)"></i>编辑</a>
                        <a href="#" class="btn btn-light-danger btn-sm mr-2"><i class="el-icon-delete"  @click="updateDepart(scope.row)"></i>删除</a>
                    -->
                </template>
             </el-table-column>          
        </el-table>
        <DepartAdd ref="departAddRef" @change="initTree"></DepartAdd><!--采用父窗口关闭传递的方法-->
        <DepartUpdate ref="departUpdateRef" @change="initTree"></DepartUpdate><!--采用父窗口关闭传递的方法-->
        <PostAdd ref="postAddRef" @change="initTree"></PostAdd><!--采用父窗口关闭传递的方法-->
        <PostUpdate ref="postUpdateRef" @change="initTree"></PostUpdate><!--采用父窗口关闭传递的方法-->
    </div>
</template>
<script>
  import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
  import Swal from "sweetalert2";
  import apiUtil from "@/core/util/apiUtil.js";   
  import DepartAdd from "@/view/sys/sys-org/sys-depart-info-add.vue";
  import DepartUpdate from "@/view/sys/sys-org/sys-depart-info-update.vue";
  import PostAdd from "@/view/sys/sys-org/sys-post-add.vue";
  import PostUpdate from "@/view/sys/sys-org/sys-post-update.vue";
  import { handleNotify,handleAlert,handleConfirm,showWating,closeWating} from "@/core/util/jehcUtil.js";
  export default {
    data(){
      return{
        orgList: [],
        defaultProps: {
            children: 'children',
            label: 'text'
        },
        props: {
            defaultExpandAll:false
        },  
        columns: [
            {
                label: '名称',
                prop: 'name'
            },
            {
                label: '类型',
                type: 'template',
                template: 'type',
                width:100,
                align:"center",
                headerAlign:'center'
            },
            {
                label: '操作',
                type: 'template',
                template: 'orgOpt',
                width:200
            },
        ],
      }
    },
    components: {
        DepartAdd,
        DepartUpdate,        
        PostAdd,
        PostUpdate,
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "组织机构" }]);
        this.initTree();
    },
    methods:{
      initTree(){
        showWating({renderBody:"orgBody"});
        apiUtil.query(process.env.VUE_APP_SYS_API+"/sysOrg/list", {}).then(({ data }) => {
            let result = JSON.parse(data.data);
            this.orgList = result;
            console.log(result);
        });
      },
      addRootSysDepart(){
        this.addSysDepart(null);
      },
      addSysDepart(id){
        this.$refs.departAddRef.showModal(id);
      },
      updateSysDepart(id){
        this.$refs.departUpdateRef.showModal(id);
      },
      addSysPost(id,type){//新建
        this.$refs.postAddRef.showModal(id,type)
      },
      updateSysPost(id){// 更新        
        this.$refs.postUpdateRef.showModal(id);
      },
      delSysDepartInfo(row){ // 删除
        if(undefined != row.children && null != row.children && row.children.length >0){
            handleAlert("该部门已被关联岗位或存在下级部门，不能删除", "warning", 3);
            return;
        }
        let id = row.id;
        // this.orgList.forEach(item => {
        // console.log(id,item.pId);
        //   if(item.pId === id){
        //     handleAlert("存在子级数据不能删除！", "success", 3);
        //     return;
        //   }
        // });       
        // 删除前提示
        this.$confirm("确认删除记录吗?", "提示", {type: "warning",}).then(() => {          
          apiUtil.delete(process.env.VUE_APP_SYS_API+"/sysDepartInfo/delete?id="+id).then(data=>{
            if(data.data.success){
              handleAlert("删除成功", "success", 3);
              this.initTree();
            }else {
              handleAlert("删除失败", "error", 3);
            }
          });
        }).catch(()=>{});//注意这里，这里是重点！！！;        
      },
      delSysPost(row){ // 删除岗位      
        if(undefined != row.children && null != row.children && row.children.length >0){
            handleAlert("该岗位存在下级岗位，不能删除", "warning", 3);
            return;
        }
        let id = row.id;  
        // 删除前提示
        this.$confirm("确认删除记录吗?", "提示", {type: "warning",}).then(() => {
          apiUtil.delete(process.env.VUE_APP_SYS_API+"/sysPost/delete?id="+id).then(data=>{
            if(data.data.success){
              handleAlert("删除成功", "success", 3);
              this.initTree();
            }else {
              handleAlert("删除失败", "error", 3);
            }
          });
        }).catch(()=>{});//注意这里，这里是重点！！！;        
      },
      collapseTree(){
        this.props.isFold=true;
      },
      expandTree(){
        this.props.isFold=false;
      }
    }
  };
</script>
<style scoped>
.zk-table__header-cell{
    color: #909399;
}
.zk-table {
    position: relative;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e9eaec;
    font-size: 14px;
    line-height: 26px;
    color: #1f2d3d;
}
</style>